<template>
    <a-row type="flex" :gutter="[16,16]" justify="center" align="middle">
        <a-col :span="6">
            <div class="box">
                <div class="tit">当前用户数</div>
                <div class="data">
                    <span>{{siteState.user_total}}</span>
                </div>
            </div>
        </a-col>
        <a-col :span="6">
            <div class="box">
                <div class="tit">今日注册数</div>
                <div class="data">
                    <span>{{siteState.user_t_reg}}</span>
                </div>
            </div>
        </a-col>
        <a-col :span="6">
            <div class="box">
                <div class="tit">今日登录数</div>
                <div class="data">
                    <span>{{siteState.user_t_login}}</span>
                </div>
            </div>
        </a-col>
        <a-col :span="6">
            <div class="box">
                <div class="tit">账户余额</div>
                <div class="data">
                    <span>￥{{siteState.user_account}}元</span>
                </div>
            </div>
        </a-col>
        <a-col :span="6">
            <div class="box">
                <div class="tit">订单数</div>
                <div class="data">
                    <span>{{siteState.order_total}}</span>
                </div>
            </div>
        </a-col>
        <a-col :span="6">
            <div class="box">
                <div class="tit">今日下单</div>
                <div class="data">
                    <span>{{siteState.order_t_total}}</span>
                </div>
            </div>
        </a-col>
        <a-col :span="6">
            <div class="box">
                <div class="tit">待办理订单</div>
                <div class="data">
                    <span>{{siteState.order_done}}</span>
                </div>
            </div>
        </a-col>
        <a-col :span="6">
            <div class="box">
                <div class="tit">文章数</div>
                <div class="data">
                    <span>{{siteState.news_num}}</span>
                </div>
            </div>
        </a-col>
        <a-col :span="24">
            <div class="box">
                <div class="tit left">访问趋势</div>
                <div class="biao">
                    <a-empty />
                </div>
            </div>
        </a-col>
    </a-row>
</template>
<style lang="less" scoped>
.box{
    background: #f2f2f2; border-radius: 5px; padding:25px 20px;
    .tit{
    text-align: center; line-height: 32px; font-size: 18px; color:black; margin-bottom: 3px;
    }

    .data{
        height: 50px;
    }
    .data>span{
        display: block; text-align: center; line-height: 50px; font-size: 20px; color:red;
    }

    .biao{
        height: 250px; padding-top: 50px;
    }

    .tit.left{
        text-align: left;
    }
}
</style>
<script setup>
import { reactive } from "@vue/reactivity";

const siteState=reactive({
    user_total:23,
    user_t_reg:4,
    user_t_login:0,
    user_account:10.00,
    order_total:3,
    order_t_total:3,
    order_done:0,
    news_num:3,
})
</script>
